<template>
  <div class="inputWrapper">
    <!-- <input :class="isOk ? '':'error'" :placeholder="placeholder" :type="type" v-model="value"/> -->
    <!-- <div v-if="!isOk">{{errMsg}}</div> -->
    <!-- 动态的 class 可以用三元表达式实现 -->
    <!-- :class="isOk ? '':'error'" -->
    <!-- 还可以用 vue 提供的对象形式来声明 -->
    <!-- 对象里面的属性以 key: value 声明 -->
    <!-- className: 是否添加这个类名的判断 -->
    <input
      :class="{
        error: !isOk
      }"
      @blur="showErrMsg"
      :placeholder="placeholder"
      :type="type"
      v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isOk: true
    };
  },
  props: ["placeholder", "type", "rule", "errMsg"],
  watch: {
    //这里是格式校验
    value(newValue) {
      // 1. 创建正则表达式
      // const pattern = /^\d{3}$/;
      // 如果你想知道一个字符串是否符合这个正则的描述
      // 可以使用 test 方法
      // pattern.test('abc') // false
      // pattern.test('123') // true
      // 每当输入数据发生变化, 我们希望能够校验数据格式
      if (this.rule.test(newValue)) {
        console.log("合法");
        this.isOk = true;
      } else {
        console.log(this.errMsg);
        this.isOk = false;
      }
      // 校验以后, 其实这个数据是父组件发请求时需要用的
      // 我们要把数据往父组件发出去
      this.$emit('setValue',newValue);
    }
  },
  methods: {
    showErrMsg() {
      if (!this.isOk) {
        // alert(this.errMsg);
        this.$toast(this.errMsg);
        // this.$toast({
        //   message: this.errMsg,
        //   position: "top"
        // });
      }
    }
  }
};
</script>

<style lang="less">
.inputWrapper {
  input {
    width: 100%;
    line-height: 40/360 * 100vw;
    font-size: 18/360 * 100vw;
    margin-bottom: 10/360 * 100vw;
    border: none;
    border-bottom: 1px solid #333;
    // 鼠标点击激活状态
    outline: none;
    text-align: center;
  }
  .error {
    border-color: red;
  }
}
</style>